/*
 * @Author: yangzonglong
 * @Date: 2021-07-09 13:20:24
 * @version: v1.0.0
 * @Descripttion: table input 控制器
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-30 13:24:01
 * @Auditor:
 */
import React, { useCallback, useState } from 'react';
import { Form, Input, } from 'antd';
import { Modal } from 'antd';
import CodeMirror from '@uiw/react-codemirror';
import update from 'immutability-helper';
import { javascript } from '@codemirror/lang-javascript';
import { IProps } from '../config';
import CommonController from '../CommonController';
import Icon from './../../icon/Icon';

const extensions = [javascript({ jsx: true })];
const screenIcon: React.CSSProperties = {
  position: 'absolute',
  right: 0,
  top: '20px'
};

const InputController = ({
  tableProps,
  required,
  formName,
  actionText,
  scriptText,
  originalIndex,
  columns,
  dataIndex,
  width,
  title,
  titleEn,
  print,
  hideInput,
  disabled,
  exportFlag,
  setCurColumn,
  changeColumnOptions,
  changeControlProps,
  fontSize,
  fontWeight,
  backgroundColor,
  color,
  customizeStyleFlag
}: IProps) => {

  const [visible, setVisible] = useState(false);
  const [codeMirrorValue, setCodeMirrorValue] = useState('');

  function show() {
    setVisible(true);
    setCodeMirrorValue(scriptText || '');
  }

  function onOk() {
    setVisible(false);
    changeColumnOptions('scriptText', codeMirrorValue);
    setCodeMirrorValue('');
  }

  const onChangeColumnOptions = useCallback(
    (e: any, k: string, isChecked?: boolean) => {
      changeColumnOptions(k, isChecked ? e.target.checked : e.target.value, originalIndex);
    },
    [changeColumnOptions, originalIndex]
  );

  const _changeControlProps = useCallback(
    (e: any, k: string, isChecked?: boolean) => {
      changeControlProps(
        'tableProps',
        {
          ...tableProps,
          columns: update(columns!, {
            [originalIndex!]: {
              [k]: {
                $set: isChecked ? e.target.checked : e.target.value,
              },
            },
          }),
        },
        true
      );

      setCurColumn?.({ ...columns![originalIndex!], originalIndex, [k]: isChecked ? e.target.checked : e.target.value });
    },
    [changeControlProps, columns, originalIndex, setCurColumn, tableProps]
  );

  return (
    <>
      <CommonController
        onChangeControlProps={_changeControlProps}
        onChangeColumnOptions={onChangeColumnOptions}
        {...{ title, titleEn, dataIndex, width, required, print, hideInput, exportFlag, disabled, fontSize, fontWeight, backgroundColor, color, customizeStyleFlag }}
      >

        <Form.Item label="表单名称">
          <Input onChange={(e) => onChangeColumnOptions(e, 'formName', false)} value={formName} />
        </Form.Item>

        <Form.Item label="按钮文字">
          <Input onChange={(e) => onChangeColumnOptions(e, 'actionText', false)} value={actionText} />
        </Form.Item>

      </CommonController>

      <div style={{ position: 'relative' }}>
        <Form.Item label='脚本内容'>
          <CodeMirror
            value={scriptText}
            onChange={e => changeColumnOptions('scriptText', e)} />
        </Form.Item>
        <Icon
          style={screenIcon}
          icon='&#xe67c;'
          onClick={show} />
      </div>
      <Modal
        visible={visible}
        title='脚本'
        width={1000}
        onCancel={() => setVisible(false)}
        onOk={onOk}>
        <CodeMirror
          extensions={extensions}
          onChange={setCodeMirrorValue}
          value={codeMirrorValue} />
      </Modal>
    </>
  );
};

export default InputController;
